<template>
    <div>
        <el-card>
            <template #header>
                <span>个人中心</span>
            </template>
            <el-form label-width="120px" label-position="right">
                <el-form-item label="管理员ID:">
                    {{ userInfo.id }}
                </el-form-item>
                <el-divider />
                <el-form-item label="账号:">
                    {{ userInfo.account }}
                </el-form-item>
                <el-divider />
                <el-form-item label="角色:">
                    {{ userInfo.role }}
                </el-form-item>
                <el-divider />
                <el-form-item label="创建时间:">
                    {{ userInfo.ctime }}
                </el-form-item>
                <el-divider />
                <el-form-item label="管理员头像:">
                    <el-upload class="avatar-uploader" :headers="headers" :action="api + '/user/avatar_upload'"
                        :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <el-avatar :size="100" v-if="imageUrl" :src="imageUrl" />
                        <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar" /> -->
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { useUserStore } from "@/store/login";
import { storeToRefs } from "pinia";
import { ElMessage } from 'element-plus'
import { computed, reactive, ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
import { _avatar_edit } from "@/api/login";

// 进入这个组件之后，就发送请求获取到个人信息，渲染
let { getInfo } = useUserStore()
let { userInfo, token } = storeToRefs(useUserStore())

let imageUrl = computed(() => {
    return userInfo.value.avatar
})

let headers = reactive<any>({})
let api = import.meta.env.VITE_Base_url
headers.Authorization = token

const handleAvatarSuccess: UploadProps['onSuccess'] = async (
    response,
    uploadFile
) => {
    imageUrl.value = import.meta.env.VITE_Base_url + response.avatar

    // 上传完头像，获取到地址之后，就发请求到后端把用户头像的地址改掉
    let res = await _avatar_edit({
        avatar: response.avatar.substring(1)
    })
    console.log(res);
    getInfo()
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('Avatar picture must be JPG format!')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('Avatar picture size can not exceed 2MB!')
        return false
    }
    return true
}

</script>

<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>